<template>
	<!-- <web-view v-if="condition == 1" :src="yuanchengurl">
				
	</web-view> -->
	<view class="container" :style="overflow">
		<view class="case">
			<block v-for="(item,index) in rareData" :key="index">
				<view class="waiwei" @click="details('../index/new_file?url=' +item.url)">
					<view class="topview">{{item.title}}</view>
					<view class="bottomview">{{item.describe}} {{formatDate(item.create_time)}}</view>
				</view>
			</block>
		</view>
	</view>
</template>
<script>
	const dataTime = require('../../utils/util.js');
	import tuiListView from "@/components/list-view/list-view"
	import tuiListCell from "@/components/list-cell/list-cell"
	import tuiIcon from "@/components/icon/icon"
	import tuiTag from "@/components/tag/tag"
	import tuiCard from "@/components/card/card"
	import tuiToast from "@/components/extend/toast/toast"
	
	import tuiTabs from "@/components/tui-tabs/tui-tabs"
	import tuiButton from "@/components/extend/button/button"
	import tuiNomore from "@/components/nomore/nomore"
	import tuiSticky from "@/components/sticky/sticky"
	import tuiTips from "@/components/extend/tips/tips"
	
	export default {
		components: {
			tuiIcon,
			tuiTag,
			tuiListView,
			tuiListCell,
			tuiCard,
			tuiToast,
			tuiTabs,
			tuiButton,
			tuiNomore,
			tuiSticky,
			tuiTips,
		},
		data() {
			return {
				pageIndex: 1,
				parm: {},
				dataInfo:{create_time:0,content:'',title:''},
				yuanchengurl:"",
				tabletop: '自主小接龙',
				condition: '1',
				
				statusList: [],
				rareData: [],
				page: 1,
				loadding: false,
				pullUpOn: true,
				empty: 1,
			}
		},
		onLoad: function(option){
			this.loadData();
		},
		methods: {
			details: function(url,type) {
				console.log(url);
				console.log(11);
				uni.navigateTo({
					url: url
				});
				return false
			},
			formatDate: function (timestamp) {
				// return {text: dataTime.getDateDiff(timestamp)}
				var timestamp = dataTime.getDateDiff(timestamp);
				return timestamp;
			},
			loadData: function(option){
				let that = this;
				that.tui.request_false('article/list',{page_size: 5 ,page:that.page}).then((res) => {
					console.log(res);
				if(res.list.list.length > 0){
					that.loadding = false
					that.pullUpOn = true
					that.empty = 1
					that.page++
					for( let i = 0; i < res.list.list.length; i++ ){
						that.rareData.push(res.list.list[i])
					}
					console.log(that.rareData);
				}else{
					that.loadding = false;
					that.pullUpOn = false;
				}
				
				if(res.list.list.length == 0 &&  that.page == 1){
					that.empty = 0;
				}
				
			}).catch((err) => {
				let params = {
					title: "服务器异常",
					imgUrl: "/static/toast/fail-circle.png",
					icon: true
				};
				that.$refs.toast.show(params);
			})
			},
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			if(this.pullUpOn == true){
				this.loadData();
			}
			//只是测试效果，逻辑以实际数据为准
			// this.loadding = true
			// this.pullUpOn = true
			// setTimeout(() => {
			// 	this.loadding = false
			// 	this.pullUpOn = false
			// }, 1000)
		},
	}
</script>

<style lang="scss">
	@import '../../static/style/thorui.css';
	.waiwei{
		width: 90%;
		margin: 0 auto;
		padding: 20rpx;
		background-color: #FFF;
		margin-top: 20rpx;
		border-radius: 10rpx;
	}
	
	.topview{
		color: #000;
		font-size: 36rpx;
	}
	
	.bottomview{
		font-size: 27rpx;
		line-height: 50rpx;
		color: #ccc;
	}
</style>
